<style lang="less" scoped>
    @import '../../styles/common.less';
    /*@import './components/table.less';*/
    .main-table {
        margin-top: 10px;
    }

    .pagination {
        margin-top: 10px;
        padding: 0 10px;
    }
</style>

<template>
    <div>
        <Row>
            <!--<Input v-model="searchConName3" placeholder="请输入姓名搜搜..." style="width: 200px" />
            <span @click="handleSearch3" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
            <Button @click="handleCancel3" type="ghost" >取消</Button>-->
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="modalVisible"
                title="用户信息"
                @on-ok="modalVisible = false"
                @on-cancel="modalVisible = false">
            <Form :model="formData" :label-width="80">
                <FormItem label="ID">
                    {{formData.id}}
                </FormItem>
                <FormItem label="有效期">
                    {{formData.time}}
                </FormItem>
                <FormItem label="优惠方式">
                    {{formData.state}}
                </FormItem>
                <FormItem label="优惠额度">
                    {{formData.preferentialamount}}
                </FormItem>
                <FormItem label="数量">
                    {{formData.number}}
                </FormItem>
                <FormItem label="使用限制">
                    {{formData.activity ? formData.activity.name : ''}}
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="saveModalVisible"
               :title="(formData.id ? '修改' : '新增') + '优惠券'"
                width="40%">
            <Form :model="formData" :label-width="80">
                <FormItem label="有效期">
                    <DatePicker type="date" v-model="formData.time" style="width:300px"></DatePicker>
                </FormItem>
                <FormItem label="优惠方式">
                    <Input v-model="formData.state" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="优惠额度">
                    <Input v-model="formData.preferentialamount" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="数量">
                    <Input v-model="formData.number" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="使用限制">
                    <Input v-model="formData.activityname" :readonly="true" style="width: 50%" icon="ios-search" @on-click="selectActivity"></Input>
                </FormItem>
                <FormItem label="选择会员" v-if="!formData.id">
                    <Transfer
                            :data="memberList"
                            :target-keys="members"
                            :titles="['可选会员', '已选会员']"
                            filterable
                            :filter-method="filterMethod"
                            @on-change="handleChange"></Transfer>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="userSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>
        <Modal v-model="activityModal"
               title="活动列表"
               @on-cancel="activityModal = false"
               width="80%"
               :mask-closable="false"
               :styles="{top: '20px'}">
            <activity-list ref="activity"></activity-list>
            <div slot="footer">
                <Button type="primary" @click="setActivity">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import activityList from '@/views/article/activityList.vue';
    import Cookies from 'js-cookie';

    export default {
        name: 'exportable-table',
        components: {activityList},
        data() {
            return {
                columns: [{
                    title: '序号',
                    key: 'xh',
                    width: 60,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', {}, ((this.pageIndex - 1) * this.pageSize + params.index + 1));
                    }
                }, {
                    title: '有效期',
                    key: 'time',
                    render: (h, params) => {
                        return h('div', {}, this.getDate(params.row.time));
                    }
                }, {
                    title: '优惠方式',
                    key: 'state'
                }, {
                    title: '优惠额度',
                    key: 'preferentialamount'
                }, {
                    title: '数量',
                    key: 'number'
                }, {
                    title: '会员昵称',
                    key: 'membername',
                    render: (h, params) => {
                        return h('div', {}, params.row.member ? params.row.member.nickname : '');
                    }
                }, {
                    title: '使用限制',
                    key: 'activityname',
                    render: (h, params) => {
                        return h('div', {}, params.row.activity ? params.row.activity.name : '');
                    }
                }, {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.detail(params.row.id);
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showEdit(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.delete(params.row.id)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }],
                baseuser: JSON.parse(Cookies.get('baseUser')),
                data: [],
                formData: {},
                modalVisible: false,
                saveModalVisible: false,
                activityModal: false,

                total: 0,
                pageIndex: 1,
                pageSize: 10,

                memberList: [],
                members: []
            };
        },
        mounted() {
            this.loadList();
            this.loadMmber();
        },
        methods: {
            loadMmber () {
                this.memberList = [];
                util.ajax.post('busine/member/findAll', util.toFormData()).then(res => {
                    let memberlist = res.data.data;
                    memberlist.forEach(item => {
                        this.memberList.push({
                            key: item.id,
                            label: item.nickname
                        });
                    });
                });
            },
            loadList() {
                util.ajax.post('busine/coupon/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    organizeid: this.baseuser.orgId
                })).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            detail(id) {
                util.ajax.post('busine/coupon/detail', util.toFormData({
                    id: id
                })).then(res => {
                    if (res.data.data) {
                        var li = res.data.data;
                        li['time'] = this.getDate(li.time);
                        this.formData = li;
                        this.modalVisible = true;
                    } else {
                        this.$Modal.error({
                            title: '警告',
                            content: '出错了'
                        });
                    }
                });
            },
            showAdd() {
                this.members = [];
                this.formData = {};
                this.saveModalVisible = true;
            },
            showEdit(obj) {
                this.formData = {};
                for (let key in obj) {
                    this.formData[key] = obj[key];
                }
                this.saveModalVisible = true;
            },
            userSave() {
                let formData = {};
                for (let key in this.formData) {
                    formData[key] = this.formData[key];
                }
                if (!formData.id) {
                    if (this.members.length === 0) {
                        this.$Modal.error({
                            content: '请选择会员！'
                        });
                        return;
                    }
                    formData['organizeid'] = this.baseuser.orgId;
                    formData['memberids'] = this.members;
                }

                util.ajax.post('busine/coupon/save', util.toFormData(formData)).then(res => {
                    if (res.data.message === 'SUCCESS') {
                        this.saveModalVisible = false;
                        this.$Message.success('保存成功！');
                        this.pageIndex = 1;
                        this.loadList();
                    } else {
                        this.$Message.warning(res.data.message || '未知错误！');
                    }
                });
            },
            delete(id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        util.ajax.post('busine/coupon/delete', util.toFormData({
                            id: id
                        })).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                this.$Message.success('删除成功！');
                                this.loadList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getDate(data) {
                let myDate;

                if (data) {
                    myDate = new Date(data);

                    let Y = myDate.getFullYear(),
                        M = myDate.getMonth() + 1,
                        D = myDate.getDate(),
                        H = myDate.getHours(),
                        Min = myDate.getMinutes(),
                        S = myDate.getSeconds();

                    if (M < 10) {
                        M = '0' + M;
                    }
                    if (D < 10) {
                        D = '0' + D;
                    }
                    if (H < 10) {
                        H = '0' + H;
                    }
                    if (Min < 10) {
                        Min = '0' + Min;
                    }
                    if (S < 10) {
                        S = '0' + S;
                    }
                    return Y + '-' + M + '-' + D;
                } else {
                    return null;
                }
            },
            selectActivity () {
                this.activityModal = true;
            },
            setActivity () {
                let activity = this.$refs.activity.activity;
                if (activity.name && activity.id) {
                    this.formData.activityname = activity.name;
                    this.formData.activityid = activity.id;
                }
                this.activityModal = false;
            },
            handleChange (newTargetKeys) {
                this.members = newTargetKeys;
            },
            filterMethod (data, query) {
                return data.label.indexOf(query) > -1;
            }
        }
    };
</script>
